<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="retrieve">
			<view class="listinput">
				<uv-text text="分享人"></uv-text>	
				<view class="inviteCode">
					<uv-input :disabled="disabledCode"  style="padding: 3px 9px ;" v-model="inviteCode" border="surround"></uv-input>
					<view class="yanzheng" @click="verClick">验证</view>
				</view>
			</view>
			<view class="listinput">
				<uv-text text="手机"></uv-text>	
				<uv-input  border="surround"  style="padding: 3px 9px;" v-model="userform.userPhone" ></uv-input>
			</view>
			<view class="listinput">
				<uv-text text="姓名"></uv-text>	
				<uv-input  border="surround"  style="padding: 3px 9px;" v-model="userform.userName" ></uv-input>
			</view>
			<view class="listinput">
				<uv-text text="密码"></uv-text>	
				<uv-input  border="surround" :type="typeInput1"  style="padding: 3px 9px;" v-model="userform.password" >
					<template v-slot:suffix>
						<uv-icon @click="passClick" v-if="!agreement" color="rgb(51, 51, 51)" size="20" name="eye-off-outline"></uv-icon>
						<uv-icon @click="passClick" v-if="agreement" color="rgb(51, 51, 51)" size="20" name="eye"></uv-icon>
					</template>
				</uv-input>
				<view  class="tips" style="color: red;">请输入16位以内登入密码</view>
			</view>
			<view class="listinput">
				<uv-text text="支付密码"></uv-text>	
				<uv-input  border="surround"  :type="typeInput2"  style="padding: 3px 9px;" v-model="userform.paypassword" >
					<template v-slot:suffix>
						<uv-icon @click="paypassClick" v-if="!agreement1" color="rgb(51, 51, 51)" size="20" name="eye-off-outline"></uv-icon>
						<uv-icon @click="paypassClick" v-if="agreement1" color="rgb(51, 51, 51)" size="20" name="eye"></uv-icon>
					</template>
				</uv-input>
				<view class="tips" style="color: red;">请输入6位数字支付密码</view>
			</view>
			<view class="listinput checkboxStyle">
				<uv-checkbox-group class="uvs-checkbox" v-model="checkbox">
					<uv-checkbox style="margin-bottom: 8px;" @change="checkboxChange"></uv-checkbox>
				</uv-checkbox-group>
				<text @click="artClick" class="book">《用户协议》</text>
				<text>我已阅读用并同意</text>
			</view>
		</view>
		<button :disabled="disabled" :class="classType" @click="registerClick">注册</button>
	</view>
</template>

<script>
	import {checkShare,registerUser} from '@/api/user.js';
	export default{
		data(){
			return{
				navstyle: {
					title: "玉器珠宝首饰商城",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				userform:{
					userName:"",
					userPhone:"",
					password:"",
					paypassword:"",
				},
				agreement: true,
				agreement1: true,
				typeInput1: "password",
				typeInput2: "password",
				inviteCode: "",
				checkboxList: [{
					name: ""
				}],
				checkbox: false,
				disabledCode: false,
				disabled: true,
				classType:"button"
			}
		},
		mounted(){
			if(this.$route.query.inviteId>0){
				this.inviteCode=this.$route.query.inviteId
			}
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/user/login' // 替换成上一页的路径
				});
			},
			checkboxChange(e) {
				this.checkbox = e;
				this.disabled = !e;
				this.disabled ? this.classType="button":this.classType="exitbtn"
				console.log(e)
			},
			passClick() {
				this.agreement = !this.agreement,
				this.agreement ? this.typeInput1 = "text" : this.typeInput1 = "password";
				
			},
			paypassClick() {
				this.agreement1 = !this.agreement1,
				this.agreement1 ? this.typeInput2 = "text" : this.typeInput2 = "password";
				
			},
			verClick(){
				let inviteCode = this.inviteCode
				checkShare({inviteCode:inviteCode}).then(res=>{
					if(res.code == 1){
						this.disabledCode = true
					}
				})
			},
			artClick(){
				uni.navigateTo({
					url:'/pages/art/index?articleId=4'
				})
			},
			registerClick(){
				var reg_tel = /^1[3456789]\d{9}$/;
				
				if(!this.userform.userName){
					uni.showToast({
						icon: "none",
						title: "请输入姓名"
					})
					return
				}
				
				if(!this.userform.userPhone){
					uni.showToast({
						icon: "none",
						title: "请输入手机号"
					})
					return
				}
				if(!this.userform.password){
					uni.showToast({
						icon: "none",
						title: "请输入密码"
					})
					return
				}
				if(!this.userform.paypassword){
					uni.showToast({
						icon: "none",
						title: "请输入支付密码"
					})
					return
				}
				if(!this.checkbox){
					uni.showToast({
						icon: "none",
						title: "请认真阅读并同意用户协议"
					})
					return
				}
				this.userform.inviteCode = this.inviteCode
				registerUser(this.userform).then(res=>{
					if(res.code==1){
						uni.showToast({
							icon: "none",
							title: "注册成功"
						})
						setTimeout(()=>{
							uni.navigateTo({
							  url: '/pages/user/login'
							});
						},2000)
						
					}else{
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})
				
			}
		}
	}
</script>

<style>
	uni-page-body, .pages, .page {
	    width: 100%;
	    height: 100%;
	}
	.uvs-checkbox{
	    display: inline-block;
	}
	.uv-input{
		padding: 3px 9px !important;
	}
	.retrieve{
	    display: flex;
	    flex-direction: column;
	    font-size: 14px;
	    color: #333;
	}
	.listinput{
	    padding: 4px 5%;
	    font-size: 14px;
	    color: #585858;
	    line-height: 42px;
	}
	.inviteCode{
	    padding-right: 110px;
	    position: relative;
	}
	.inviteCode .yanzheng{
	    width: 110px;
	    height: 30px;
	    line-height: 30px;
	    text-align: center;
	    color: #333;
	    background-color: #cacaca;
	    position: absolute;
	    right: 0;
	    top: 0;
	}
	.checkboxStyle{
	    padding-left: 15px;
	    position: relative;
	}
	.book{
	    color: #007aff;
	    font-size: 12px;
	}
	.button {
	    width: 80%;
	    border-radius: 50px;
	    background-color: #c8c7cc;
	    font-size: 14px;
	    margin: 32px auto 0 auto;
	    color: #333;
	    padding: 3px 0;
	    border: none;
	}
	.exitbtn {
	    width: 80%;
	    border-radius: 50px;
	    background: linear-gradient(135deg, #d66c6b, #ed6266);
	    font-size: 14px;
	    margin: 32px auto 0 auto;
	    color: #fff;
	    padding: 3px 0;
	    border: none;
	}
	button[disabled]:not([type]), button[disabled][type=default] {
	    background-color: #c8c7cc;
	    color: #333;
	}
</style>